<template>
	
	<div class="taobao">
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<div class="generalize" v-show='isShow'>
			<div class="generalize_d">
				<div class="hint">温馨提示</div>
				<div class="hintC">您还没有创建淘宝推广位，推广的佣金不会更新到您的账户，是否立刻联系客服!</div>
				<div class="select">
					<div @click="cancelon">取消</div>
					<div @click="affirmon">确认</div>
				</div>
			</div>
		</div>
		<header class="aui-header navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>淘宝</div>
			<div @click="seekon"><img src="../assets/seek.png"></div>
		</header>
		
		<div class="menulist">
			<ul class="menulist-ul" :style="{width:len + 'rem'}">
				<li v-for="item in goodetype" :class="id == item.favoritesId ?'on' :'samemenu-li'"  @click="classifyon(item.favoritesTitle,item.favoritesId)">{{item.favoritesTitle}}</li>
			</ul>
			<div class="more" @click="goodsclassifyon"><img src="../assets/images1/propup.png"></div>
			
		</div>
		<div class="goodsclassify" v-show='classifyshow'>
			<span v-for='item in goodetype' class="goodsclassify_s" @click="classifyon(item.favoritesTitle,item.favoritesId)">{{item.favoritesTitle}}</span>
		</div>
		
		<div>
			<div class="banner" v-show='show'>
				<!--<mt-swipe :auto="4000">
					<mt-swipe-item v-for="(item,index) in bannerList" class="bannerpic"  >
					  	<img :src="item.img" @click="nav(item.id,item.value,index,item.linkType)">
					</mt-swipe-item>
				</mt-swipe>-->
				<mt-swipe :auto="4000">
					<mt-swipe-item v-for="(item,index) in banderimg" class="bannerpic"  >
					  	<img :src="item.img" @click='banners(item.id,item.value,item.linkType)'>
					</mt-swipe-item>
				</mt-swipe>
			</div>
			
			<!--模板列表-->
			<div class="modulelist"  v-show='show'>
				<div v-for='item in modulelist' @click="moduleList(item.value,item.linkType,item.name)">
					<img :src="item.img">
					<div>{{item.name}}</div>
				</div>
			</div>
			
			<div class="goodscontent">
				
				<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
					<div class="goodelist" v-for="item in goodslist" @click="skipon(item.couponUrl)" v-if="item.spuPlatform == 'tb'">
						<div class="goodsimg"><img :src="item.mainImageUrl"></div>
						<div class="goodsName">
							{{item.goodsName}}
						</div>
						<div class="rawprice">
							<div>￥{{item.price}}</div>
							<div> / {{item.couponMoney}} 降元</div>
						</div>
						<div class="cashprice">
							<div>￥{{item.conPrice | keep}}</div>
							<div>已抢购{{item.totalSales}}件</div>
						</div>
						<div class="promptly">立即抢购</div>
					</div>
				</ul>
			</div>
		
		</div>	
		
	</div>
	
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				classifyshow:false,    //商品隐藏
				userId:'',
				goodetype:[],        // 商品分类列表
				len:'',
				id:'',
				isShow:false,
				adazone_id:'',
				banderimg:[],   //轮播图列表
				modulelist:[],  //模板列表
				token:'',
				goodslist:[],    //商品列表
				index:1,
				loading:'',
				show:true,
				Loading:true
			}
		},
		created(){
			this.userId = localStorage.getItem('userId');
			this.token = localStorage.getItem('token');
			var tao = localStorage.getItem('tao');
			
//			alert(this.token)
			
			//推广位信息
				if(tao ==1){
				var url = BaseUrl + 'tb/getTGWInfo?appId=wap' + '&token=' + this.token;
					this.Loading = true;
					this.$http.post(url).then(res=>{
						if(res.data.code == '10000'){
							this.Loading = false;
//							console.log(res)
							this.adazone_id = res.data.data.adazone_id;
							localStorage.setItem('adazone_id',this.adazone_id);
							if(res.data.data.isOpen == 'no'){
								if(this.token == '' || this.token == null){
									this.isShow = false
								}else{
									this.isShow = true;
								}
							}
							localStorage.setItem('tao','0');
						}
					}).catch(error=>{
						this.Loading = false;
						Toast({
							message: "网络异常",
							position: 'middle',
							duration: 3000
						})
					})
			}
			//轮播
			var url = BaseUrl + 'market/banners?type=tb';
			this.Loading = true;
			this.$http.post(url).then(res=>{
//				console.log(res)
				if(res.data.code == '10000'){
					this.Loading = false;
					this.banderimg = res.data.data;
				}
				
			}).catch(res=>{
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			
			//模块
			var url = BaseUrl + 'market/models?type=tb';
			this.Loading = true;
			this.$http.post(url).then(res=>{
//				console.log(res)
				if(res.data.code == '10000'){
					this.Loading = false;
					this.modulelist = res.data.data;
				}
			}).catch(error=>{
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})
			
			
			//分类
			var url = BaseUrl + 'tb/getfav';
				this.Loading = true;
				this.$http.post(url).then(res=>{
//					console.log(res.data.data[0].favoritesId)
				if(res.data.code == '10000'){
					this.Loading = false;
						this.goodetype = res.data.data;
						this.id = res.data.data[0].favoritesId;
						var len = res.data.data.length;
						this.len = len*2;
				}else{
					this.Loading = false;
					Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					})
				}
			}).catch(error=>{
				this.Loading = false;
				Toast({
					message: "网络异常",
					position: 'middle',
					duration: 3000
				})
			})

		},
		filters:{
			keep:function(val){
				val = Number(val)
				return val.toFixed(2)
			}
		},
		methods:{
			//分类的显示隐藏
			goodsclassifyon:function(){
				this.classifyshow = !this.classifyshow
			},
			//搜索
			seekon:function(){
				var name = escape('淘宝');
				var type = escape('hq');
				this.$router.push({
					path:'/seekgoods',query:{name:name,type:type}
				})
			},
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			//取消
			cancelon:function(){
				this.isShow = false;
				localStorage.setItem('tao','0');
			},
			//确认
			affirmon:function(){
				this.isShow = false;
				window.location.href = 'http://chat56.live800.com/live800/chatClient/chatbox.jsp?companyID=944015&configID=155782&jid=9694995927';
				localStorage.setItem('tao','0');
			},
			//模块
			moduleList:function(value,linkType,name){
				if(linkType == 'h5'){
					window.location.href = value;
				}else{
					this.$router.push({
						path:'/taobaocatalog?module=' + value + '&name=' + name
					})
				}
				
//				if(value != 'xrlb'){
//					this.$router.push({
//						path:'/taobaocatalog?module=' + value + '&name=' + name
//					})
//				}else{
//					window.location.href = 'https://mos.m.taobao.com/activity_newer?from=pub&pid=mm_129485769_44648739_684748543'
//				}
				
				
			},
			//轮播
			banners:function(id,value,linkType){
				if(linkType == 'h5'){
					window.location.href = value
				}else{
					this.$router.push({ path: '/activityPage?type=wap&activityId=' +id })
				}
			},
			//商品分类名字
			classifyon:function(favoritesTitle,id){
				if(favoritesTitle == '推荐'){
					this.show = true; 
				}else{
					this.show = false;
				}
				this.id = id;
				this.goodslist = [];
				this.index = 1;
				this.singInfo(this.index);
			},
			singInfo(index){
				this.Loading = true;
				this.adazone_id = localStorage.getItem('adazone_id');
				var url = BaseUrl + 'tb/getfavitemByfavIds?adazone_id=' + this.adazone_id + '&favoritesId=' + this.id  + '&pageNo=' + this.index + '&pageSize=10' + '&type=' + ""
				this.$http.post(url).then(res=>{
//					console.log(res)
					if(res.data.code == '10000'){
							this.Loading = false;
							this.goodslist = this.goodslist.concat(res.data.data);
							if(res.data.isMore == "no"){
								this.loading = true;
								Toast({
									message: "暂无数据",
									position: 'bottom',
									duration: 3000
								})
								return;
							}else if(res.data.isMore == "have"){
								this.loading = false;
								this.index++;
							}
					}
				}).catch(error=>{
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			loadMore(){
				this.loading = this.loading;
				if(this.loading == false){
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 1000);
				}
			},
			skipon:function(val){
				window.location.href = val;
			},
		}
	}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		/*background: rgba(0,0,0,0.5);*/
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.taobao{
		padding-top: 1.9rem;
	}
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		border-bottom: 1px solid #dcd2d1;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
		z-index: 999;
	}
	
	.navigation div:nth-child(1) img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.navigation div:nth-child(2){
		color: #ff2040;
	}
	.navigation div:nth-child(3) img{
		width: 0.4rem;
		height: 0.4rem;
		display: block;
	}
	
	.generalize{
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(0,0,0,0.5);
		top: 0;
		left: 0;
		z-index: 9999;
	}
	.generalize_d{
		width: 80%;
		/*height: 1.5rem;*/
		background: #fff;
		position: relative;
		top: 50%;
		left: 50%;
		margin-top: -1.5rem;
		margin-left: -40%;
		border-radius: 0.2rem;
		text-align: center;
		font-size: 0.35rem;
		color: #323232;
	}
	.hint{
		padding: 0.2rem 0.25rem 0 0.25rem;
	}
	.hintC{
		padding: 0.25rem 0.25rem;
	}
	.select{
		display: flex;
		flex-direction: row;
		border-top: 1px solid #CCCCCC;
	}
	.select div{
		width: 50%;
		text-align: center;
		padding: 0.2rem;
	}
	.select div:nth-child(1){
		font-size: 0.26rem;
		background: #fff;
		border-radius:  0 0 0 0.2rem;
	}
	.select div:nth-child(2){
		color: #fff;
		font-size: 0.26rem;
		background: red;
		border-radius: 0 0 0.2rem 0;
	}
	/**菜单***/
	.menulist{
		width: 100%;
		height: 0.9rem;
		background-color: #fff;
		top:1rem;
		left: 0;
		overflow-x: auto;
		position: fixed;
		z-index:999;
		border-bottom: 1px solid #ccc;
	}
	.menulist-ul{
		height: 0.88rem;
		display: flex;
	}
	.samemenu-li{
		padding: 0.2rem;
		display: block;
	}
	.on{
		padding: 0.2rem;
		display: block;
		color: #ff2040;
		border-bottom: 1px solid #ff2040;
	}
	.more{
		width: 0.88rem;
		height: 0.88rem;
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		border-left: 1px solid #ccc;
		position: fixed;
		top: 1rem;
		right: 0;
		border-bottom: 1px solid #CCCCCC;
	}
	.more img{
		width: 0.39rem;
		height: 0.21rem;
		display: block;
	}
	
	/*轮播*/
	.banner{
		width: 100%;
		height: 3.5rem;
	}
	.banner img{
		width: 100%;
		height: 100%;
	}
	
	/*模块*/
	.modulelist{
		display: flex;
		justify-content: space-around;
	}
	.modulelist div{
		font-size: 0.2rem;
		color: #8b8b8b;
		text-align: center;
		margin-bottom: 0.2rem;
	}
	.modulelist div img{
		margin: 0.15rem 0;
		width: 1rem;
		height: 1rem;
		display: block;
	}
	/*商品*/
	.goodsclassify{
		padding: 0.2rem 0.25rem;
		background: #f2f2f2;
		position: absolute;
		top: 1.9rem;left: 0;
		z-index: 9;
	}
	.goodsclassify_s{
		padding: 0.05rem 0.05rem;
		border: 1px solid #919191;
		color: #919191;
		font-size: 0.2rem;
		display: inline-block;
		margin: 0.05rem;
		border-radius:0.1rem ;
	}
	.ons{
		padding: 0.05rem 0.05rem;
		border: 1px solid #ff2040;
		color: #ff2040;
		font-size: 0.2rem;
		display: inline-block;
		margin: 0.05rem;
		border-radius:0.1rem ;
	}
	
	.goodscontent ul{
		overflow: hidden;
	}
	.goodelist{
		width: 47%;
		float: left;
		margin: 0.1rem;
	}
	.goodsimg{
		width: 100%;
		height: 2.5rem;
	}
	.goodsimg img{
		width: 100%;
		height: 2.5rem;
		display: block;
	}
	.goodsName{
		height: 0.55rem;
		display: -webkit-inline-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #878787;
		font-size: 0.26rem;
		line-height: 1.2;
		padding: 0 0.2rem;
		margin-top: 0.05rem;
	}
	.goodsName img{
		width: 0.7rem;
		height: 0.3rem;
	}
	.rawprice{
		display: flex;
		flex-direction: row;
		padding: 0 0.2rem;
	}
	.rawprice div:nth-child(1){
		text-decoration: line-through;
		color: #989898;
		font-size: 0.2rem;
	}
	.rawprice div:nth-child(2){
		color: #FF2040;
		font-size: 0.2rem;
	}
	.cashprice{
		display: flex;
		justify-content: space-between;
	}
	.cashprice div:nth-child(1){
		color: #FF2040;
		font-size: 0.26rem;
	}
	.cashprice div:nth-child(2){
		color: #989898;
		font-size: 0.2rem;
	}
	.promptly{
		margin: 0.2rem;
		background: #ff2040;
		color: #fff;
		text-align: center;
		padding: 0.05rem 0;
		border-radius: 0.3rem;
	}
</style>